<template>
    <button :class="'btn ' + class_size + ' ' + class_color" :disabled="loading">
        <i v-if="props.loading" class="fa fa-spinner anim-rotate-inf"></i>
        <slot v-else></slot>
    </button>
</template>

<script setup lang="ts">

import {computed} from "vue";

/**
 * 按钮
 */
interface Props {
    /** 按钮类型 */
    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | '',
    /** 样式 */
    shape?: 'default' | 'circle' | 'badge',
    /** 按钮大小 */
    size?: 'small' | 'default' | 'large',
    /** 主题：默认、朴素、超链接 */
    theme?: 'default' | 'plain',
    /** 是否为朴素按钮 */
    plain?: boolean
    /** 是否正在加载 */
    loading?: boolean
    /** 是否禁用 */
    disabled?: boolean
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
    type: "default", shape: "default", size: "default", theme: 'default', disabled: false, loading: false
})

const class_size = computed(() => {
    if (props.shape === 'default') {
        return `btn-${props.size}`;
    } else if (props.shape === 'circle') {
        return `btn-circle-${props.size}`;
    } else {
        return `btn-round-${props.size}`;
    }
});

const class_color = computed(() => {
    if (props.theme === 'default') {
        if (props.type === 'default' || props.type === '') {
            return ''
        } else {
            return `btn-${props.type}`;
        }
    } else {
        if (props.type === 'default' || props.type === '') {
            return 'btn-plain'
        } else {
            return `btn-plain-${props.type}`;
        }
    }
});

</script>
<style scoped>
</style>